<script setup>
import 'media-chrome';
import { ref, onMounted, watch } from 'vue';
import { getApiUrl } from '@/config/urlconfig.js';
const props = defineProps({
  video: {
    type: Object,
    required: true
  },
  folderId: {
    type: String,
    default: ''
  }
});

const videoUrl = ref('');
const isPlaying = ref(false);
const videoElement = ref(null);
const videoError = ref(false);
const errorMessage = ref('');


// 根据视频信息构建视频URL
const buildVideoUrl = () => {
  // 检查视频对象是否存在
  if (!props.video) return '';
  
  // 从视频对象中获取必要信息
  // 尝试获取多种可能的属性名
  const videoName = props.video.video_name || props.video.title || '';
  
  // 如果缺少视频名称，返回空字符串
  if (!videoName) {
    console.warn('视频信息不完整，无法构建URL', props.video);
    return '';
  }
  
  // 使用传递的文件夹路径
  const folderPath = props.video.folder_path || '';
  
  // 构建完整视频路径
  const videoPath = folderPath ? `${folderPath}/${videoName}` : videoName;
  
  console.log('视频对象:', props.video);
  console.log('构建路径 - 文件夹路径:', folderPath, '视频名称:', videoName);
  
  // 对完整路径进行编码
  const encodedPath = encodeURIComponent(videoPath);
  const url = getApiUrl('api/video', { path: encodedPath });
  console.log('构建视频URL:', url, '视频路径:', videoPath);
  return url;
};

// 初始化视频URL和视频元素
onMounted(() => {
  // 构建视频URL
  videoUrl.value = buildVideoUrl();
  console.log('组件挂载完成，初始化视频URL:', videoUrl.value);
  
  // 确保能获取到视频元素
  setTimeout(() => {
    const videoEl = document.getElementById('video-player');
    if (videoEl) {
      console.log('成功获取视频元素');
      // 如果ref没有正确绑定，手动设置
      if (!videoElement.value) {
        videoElement.value = videoEl;
      }
    } else {
      console.warn('无法通过ID获取视频元素');
    }
  }, 100); // 短暂延迟确保DOM已渲染
});

// 当视频信息变化时更新视频URL
watch(() => props.video, () => {
  videoUrl.value = buildVideoUrl();
  isPlaying.value = false;
  
  // 如果视频元素已存在，需要重新加载视频
  if (videoElement.value) {
    videoElement.value.load();
  }
}, { deep: true });
</script>
<template>
    <div class="video-player-container">
    <media-controller>
      <video id="video-player" slot="media" :src="videoUrl" crossorigin preload="auto" playsinline>
      </video>
      <media-control-bar>
        <media-play-button></media-play-button>
        <media-mute-button></media-mute-button>
        <media-volume-range></media-volume-range>
        <media-time-range></media-time-range>
        <media-time-display></media-time-display>
        <media-pip-button></media-pip-button>
        <media-playback-rate-button rates="1 1.5 2 2.5 3 3.5 4 16"></media-playback-rate-button>
        <media-fullscreen-button></media-fullscreen-button>
        <media-loading-indicator slot="centered-chrome"></media-loading-indicator>
      </media-control-bar>
    </media-controller>
  </div>
</template>

<style scoped>
.video-player-container {
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  overflow: hidden;
  position: relative;
}

media-controller {
  width: 100%;
  height: 100%;
  --media-control-background: rgba(20, 20, 20, 0.7);
  --media-control-hover-background: rgba(20, 20, 20, 0.9);
}

#video-player {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

media-control-bar {
  padding: 0.5rem;
}
</style>